<template>
  <div>
    <el-card>
      <el-tabs tab-position="left">
        <el-tab-pane label="安全设置">
          <div class="title">安全设置</div>
          <el-row type="flex" justify="space-between">
            <el-col :span="12">
              <div class="text1">账号密码</div>
              <div class="text2">当前密码强度</div>
            </el-col>
            <el-col :span="6" class="edit"> 修改 </el-col>
          </el-row>
          <el-row type="flex" justify="space-between">
            <el-col :span="12">
              <div class="text1">密保手机</div>
              <div class="text2">已绑定手机：176****7196</div>
            </el-col>
            <el-col :span="6" class="edit"> 修改 </el-col>
          </el-row>
          <el-row type="flex" justify="space-between">
            <el-col :span="12">
              <div class="text1">密保问题</div>
              <div class="text2">未设置密保问题</div>
            </el-col>
            <el-col :span="6" class="edit"> 修改 </el-col>
          </el-row>
          <el-row type="flex" justify="space-between">
            <el-col :span="12">
              <div class="text1">备用邮箱</div>
              <div class="text2">已绑定邮箱：lvxiaobu@163.com</div>
            </el-col>
            <el-col :span="6" class="edit"> 修改 </el-col>
          </el-row>
          <el-row type="flex" justify="space-between">
            <el-col :span="12">
              <div class="text1">MFA设备</div>
              <div class="text2">未绑定MFA设备</div>
            </el-col>
            <el-col :span="6" class="edit"> 修改 </el-col>
          </el-row>

        </el-tab-pane>
        <el-tab-pane label="新消息通知">
          <div class="title">新消息通知</div>
          <el-row type="flex" justify="space-between">
            <el-col :span="12">
              <div class="text1">账号密码</div>
              <div class="text2">其他用户消息将以站内信的形式通知</div>
            </el-col>
            <el-col :span="6" class="edit">
              <el-switch
                v-model="value"
                active-color="#13ce66"
                inactive-color="#ff4949"
              /></el-col>
          </el-row>
          <el-row type="flex" justify="space-between">
            <el-col :span="12">
              <div class="text1">系统消息</div>
              <div class="text2">系统消息将以站内信的形式通知</div>
            </el-col>
            <el-col :span="6" class="edit">
              <el-switch
                v-model="value"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between">
            <el-col :span="12">
              <div class="text1">代办任务</div>
              <div class="text2">代办任务将以站内信的形式通知</div>
            </el-col>
            <el-col :span="6" class="edit">
              <el-switch
                v-model="value"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: ''
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
  .el-card{
    margin: 30px;
    height: 100vh;
    .title{
      font-size: 22px;
      margin-bottom: 20px;
    }
    .el-row{
      padding: 10px;
      border-bottom: 1px solid #f0f0f0;
    }
    .text1{
      font-size: 14px;
      color: rgba(0,0,0,.85);
      margin-bottom: 10px;
    }
    .text2{
      font-size: 14px;
      color: rgba(0,0,0,.45);
    }
    .edit{
      color: rgb(64, 158, 255);
    }
  }
</style>
